<template>
    <section class="main">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-rank"></i>拖拽菜单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="drag-box">
                <div class="drag-box-item">
                    <div class="item-title">父级菜单</div>
                    <draggable v-model="items" :options="dragOptions">
                        <transition-group tag="div" class="item-ul">
                            <div v-for="item in items" class="drag-list" :key="item.index">
                                {{ item.title
                                }}<el-button @click="show_subs(item)" v-if="item.children" type="text" style="float: right"
                                    >展开子菜单</el-button
                                >
                            </div>
                        </transition-group>
                    </draggable>
                </div>
                <div class="drag-box-item">
                    <div class="item-title">子级菜单</div>
                    <draggable v-model="subsItem.children" :options="dragOptions">
                        <transition-group tag="div" class="item-ul">
                            <div v-for="item in subsItem.children" class="drag-list" :key="item.index">
                                {{ item.title }}
                            </div>
                        </transition-group>
                    </draggable>
                </div>
                <el-button @click="save" type="success" round class="save">保存菜单</el-button>
            </div>
        </div>
    </section>
</template>

<script>
import draggable from 'vuedraggable';
import { menuListData, setMenuData } from '../../api/index';
export default {
    // name: 'draglist',
    data() {
        return {
            dragOptions: {
                animation: 120,
                scroll: true,
                group: 'sortlist',
                ghostClass: 'ghost-style'
            },
            form: {
                menu_rules: [],
            },
            items: [
                {
                    icon: 'el-icon-lx-home',
                    index: 'index',
                    title: '概况'
                },
                {
                    icon: 'el-icon-lx-cascades',
                    index: 'shop',
                    title: '店铺装修',
                    subs: [
                        // {
                        //     index: 'wapShop',
                        //     title: '移动端店铺'
                        // },
                        // {
                        //     index: 'pcShop',
                        //     title: '电脑端店铺'
                        // }

                        {
                            index: 'custom',
                            title: '自定义页面'
                        }
                        // {
                        //     index: 'nav',
                        //     title: '底部导航'
                        // }
                    ]
                },
                {
                    icon: 'el-icon-lx-copy',
                    index: 'courseList',
                    title: '内容类型',
                    subs: [
                        {
                            index: 'classification',
                            title: '分类'
                        },
                        {
                            index: 'fenzu',
                            title: '分组'
                        },
                        {
                            index: 'article',
                            title: '图文'
                        },
                        {
                            index: 'audio',
                            title: '音频'
                        },
                        {
                            index: 'video',
                            title: '视频'
                        },
                        {
                            index: 'package',
                            title: '专栏'
                        }
                    ]
                },
                {
                    icon: 'el-icon-lx-calendar',
                    index: 'live',
                    title: '直播',
                    subs: [
                        {
                            index: 'small_class',
                            title: '公开课'
                        }
                    ]
                },
                {
                    icon: 'el-icon-lx-emoji',
                    index: 'aidTool',
                    title: '助学工具',
                    subs: [
                        {
                            index: 'examination',
                            title: '试卷'
                        },
                        // {
                        //     index: 'exercise',
                        //     title: '作业本'
                        // },
                        {
                            index: 'questionbank',
                            title: '题库'
                        },
                        // {
                        //     index: 'certificate',
                        //     title: '证书'
                        // },
                        {
                            index: 'exam',
                            title: '考试'
                        },
                        {
                            index: 'answer_record',
                            title: '答题记录'
                        }
                    ]
                },
                {
                    icon: 'el-icon-lx-emoji',
                    index: 'lecturer_manage',
                    title: '讲师管理',
                    subs: [
                        // {
                        //     index: 'lecturer_login',
                        //     title: '讲师登录'
                        // },
                        {
                            index: 'lecturer_list',
                            title: '讲师列表'
                        },
                        {
                            index: 'lecturer_commission',
                            title: '讲师佣金'
                        },
                        {
                            index: 'lecturer_withdraw',
                            title: '讲师提现'
                        },
                        {
                            index: 'lecturer_set',
                            title: '讲师配置'
                        }
                    ]
                },
                {
                    icon: 'el-icon-pie-chart',
                    index: 'user_manage',
                    title: '用户管理',
                    subs: [
                        {
                            index: 'user_list',
                            title: '用户列表'
                        },
                        {
                            index: 'member_settings',
                            title: '会员设置'
                        },
                        {
                            index: 'member_list',
                            title: '会员列表'
                        }
                    ]
                },
                {
                    icon: 'el-icon-rank',
                    index: 'order_manage',
                    title: '交易',
                    subs: [
                        {
                            index: 'order_list',
                            title: '订单管理'
                        },
                        {
                            index: 'refund_list',
                            title: '退款管理'
                        }
                    ]
                },
                // {
                //     icon: 'el-icon-lx-global',
                //     index: 'data',
                //     title: '数据中心',
                //     subs: [
                //         {
                //             index: 'survey',
                //             title: '数据概况'
                //         },
                //         {
                //             index: 'flow',
                //             title: '流量分析'
                //         },
                //         {
                //             index: 'deal',
                //             title: '交易分析'
                //         },
                //         {
                //             index: 'goods',
                //             title: '商品分析'
                //         },
                //         {
                //             index: 'consumer',
                //             title: '用户分析'
                //         }
                //     ]
                // },
                {
                    icon: 'el-icon-lx-redpacket_fill',
                    index: 'market',
                    title: '营销中心',
                    subs: [
                        {
                            index: 'marketingPlay',
                            title: '营销玩法'
                        }
                    ]
                },
                {
                    icon: 'el-icon-lx-warn',
                    index: 'setting',
                    title: '设置',
                    subs: [
                        {
                            index: 'shop',
                            title: '店铺设置'
                        },
                        {
                            index: 'announce_manage',
                            title: '公告管理'
                        },
                        {
                            index: 'suggest',
                            title: '建议/意见'
                        },
                        {
                            index: 'staff',
                            title: '员工管理'
                        },
                        {
                            index: 'opLog',
                            title: '操作日志'
                        },
                        {
                            index: 'menuSort',
                            title: '拖拽菜单'
                        }
                    ]
                },
                {
                    icon: 'el-icon-lx-redpacket_fill',
                    index: 'service',
                    title: '服务',
                    subs: [
                        {
                            index: 'service_buy',
                            title: '服务订购'
                        }
                    ]
                },
                {
                    icon: "el-icon-lx-redpacket_fill",
                    index: "infoManage",
                    title: "信息管理",
                    subs: [
                      { index: "set_kefu", title: "设置客服" },
                      { index: "reply_msg", title: "回复信息" }
                    ]
                },
                {
                    icon: 'el-icon-lx-redpacket_fill',
                    index: 'limitsManage',
                    title: '权限管理',
                    subs: [
                        {
                            index: 'accountManage',
                            title: '账号管理'
                        },
                        {
                            index: 'accountLimits',
                            title: '账号权限'
                        }
                    ]
                }
            ],
            // items: [],
            subsItem: []
        };
    },
    components: {
        draggable
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            menuListData().then((res) => {
                this.items = res.data.menu_rules;
            });
        },
        show_subs(item) {
            console.log(item)
            this.subsItem = [];
            setTimeout(() => {
                this.subsItem = item;
            }, 500);
        },
        save() {
            this.form.menu_rules = this.items;
            setMenuData(this.form).then((res) => {
                console.log(res);
                if (res.code == 1) {
                    this.$message.success('设置菜单成功');
                    // setTimeout(() => {
                    //     location.reload();
                    // }, 200);
                    this.getData();
                }
            });
        }
    }
};
</script>

<style scoped>
.drag-box {
    display: flex;
    user-select: none;
}
.drag-box-item {
    flex: 1;
    max-width: 330px;
    min-width: 300px;
    background-color: #eff1f5;
    margin-right: 16px;
    border-radius: 6px;
    border: 1px #e1e4e8 solid;
}
.item-title {
    padding: 8px 8px 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #24292e;
    font-weight: 600;
}
.item-ul {
    padding: 0 8px 8px;
    height: 500px;
    overflow-y: scroll;
}
.item-ul::-webkit-scrollbar {
    width: 0;
}
.drag-list {
    border: 1px #e1e4e8 solid;
    padding: 10px;
    margin: 5px 0 10px;
    list-style: none;
    background-color: #fff;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: border 0.3s ease-in;
    transition: border 0.3s ease-in;
}
.drag-list:hover {
    border: 1px solid #20a0ff;
}
.drag-title {
    font-weight: 400;
    line-height: 25px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.ghost-style {
    display: block;
    color: transparent;
    border-style: dashed;
}
.save {
    height: 50px;
}
</style>
